<!-- 页面 -->
<template>
	<view class="ss-user-info-wrap ss-p-t-50">
		<view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
			<view class="left-box ss-flex ss-col-center ss-m-l-36">
				<view class="ss-flex ss-col-center">
					<view class="nickname-box ss-col-center ss-m-l-30 ss-m-r-30">
						<view class="nick-name ss-m-r-20" @tap="onLogin">{{ userInfo?.nickname || nickname }}</view>
						<view class="nick-id ss-m-r-20 ss-m-t-10">ID:{{ userInfo?.id || id }}</view>
						<!-- <view class="nick-level ss-m-r-20 ss-m-t-10" v-if="userInfo.level_name"
							:style="{backgroundImage:'url('+sheep.$url.static('static/person.png')+')'}">
						</view> -->
						<view class="nick-level ss-m-r-20 ss-m-t-10 ss-flex" v-if="userInfo.level_name">
							<image class="per" :src="sheep.$url.static('static/Group_1929.png')" mode="aspectFill"
								></image>
							<view class="right" :style="{backgroundImage:'url('+sheep.$url.static('static/Rectangle_1441.png')+')'}"
								>{{ userInfo?.level_name}}</view>	
						</view>
					</view>
					<!-- 分享二维码 -->
					<view class="right-box ss-m-r-52">
						<button class="ss-reset-button" @tap="showShareModal">
							<text class="sicon-qrcode"></text>
						</button>
					</view>
				</view>
			</view>
			<view class="avatar-box ss-m-r-64">
				<image class="avatar-img" :src="
			  isLogin
			    ? sheep.$url.cdn(userInfo.avatar)
			    : sheep.$url.static('/assets/addons/shopro/uniapp/default_avatar.png')
			" mode="aspectFill" @tap="sheep.$router.go('/pages/user/info')"></image>
			<image class="edit-img" :src="sheep.$url.static('static/edit.png')" mode="aspectFill"
				@tap="sheep.$router.go('/pages/user/info')"></image>
			</view>
		</view>

		<view class="bind-mobile-box ss-flex ss-row-between ss-col-center" v-if="isLogin && !userInfo?.mobile">
			<view class="ss-flex">
				<text class="cicon-mobile-o"></text>
				<view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>
			</view>
			<button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
		</view>
	</view>
</template>

<script setup>
	/**
	 * 用户卡片
	 *
	 * @property {Number} leftSpace 									- 容器左间距
	 * @property {Number} rightSpace 									- 容器右间距
	 *
	 * @property {String} avatar 					- 头像
	 * @property {String} nickname 					- 昵称
	 * @property {String} vip		  				- 等级
	 * @property {String} collectNum 				- 收藏数
	 * @property {String} likeNum 					- 点赞数
	 *
	 *
	 */

	import {
		computed,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import {
		showShareModal,
		showAuthModal
	} from '@/sheep/hooks/useModal';

	// 用户信息
	const userInfo = computed(() => sheep.$store('user').userInfo);

	// 是否登录
	const isLogin = computed(() => sheep.$store('user').isLogin);
	// 接收参数
	const props = defineProps({
		background: {
			type: String,
			default: '',
		},
		// 头像
		avatar: {
			type: String,
			default: '',
		},
		nickname: {
			type: String,
			default: '请先登录',
		},
		id: {
			type: String,
			default: '-',
		},
		levelname: {
			type: String,
			default: '',
		},
		vip: {
			type: [String, Number],
			default: '1',
		},
		collectNum: {
			type: [String, Number],
			default: '1',
		},
		likeNum: {
			type: [String, Number],
			default: '1',
		},
	});

	function onBind() {
		showAuthModal('changeMobile');
	}

	function onLogin() {
		let res = sheep.$store('user').isLogin
		console.log('res', !res)
		if (!res) {
			showAuthModal();
			return;
		}
	}
</script>

<style lang="scss" scoped>
	.ss-user-info-wrap {
		box-sizing: border-box;

		.avatar-box {
			.edit-img {
				width: 60rpx;
				height: 28rpx;
				margin-left: -50rpx;
			}

			.avatar-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}

		

		.nick-name {
			font-size: 34rpx;
			font-weight: 400;
			color: #081738;
			line-height: normal;
		}

		.nick-id {
			font-size: 24rpx;
			font-weight: 400;
			color: #979797;
			line-height: normal;
		}

		.nick-level {
			height: 50rpx;
			background-size: 100% 100%;
			font-size: 22rpx;
			font-weight: 400;
			text-align: center;
			color: #E84010;
			line-height: 44rpx;
			box-sizing: border-box;
			position: relative;
				
			.per{
				position: absolute;
				width: 50rpx;
				height: 50rpx;
				z-index: 50;
				left:-4rpx;
			}
			.right{
				width:180rpx;
				position: absolute;
				left:10rpx;
				height: 38rpx;
				line-height: 40rpx;
				padding: 1rpx 0rpx 2rpx 30rpx;
				background-size: 100% 100%;
				border-top-right-radius: 24%;
				border-bottom-right-radius: 24%;
			}
		}

		.vip-img {
			width: 30rpx;
			height: 30rpx;
		}

		.sicon-qrcode {
			font-size: 40rpx;
		}
	}

	.bind-mobile-box {
		width: 100%;
		height: 84rpx;
		padding: 0 34rpx 0 44rpx;
		box-sizing: border-box;
		background: #ffffff;
		box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);

		.cicon-mobile-o {
			font-size: 30rpx;
			color: #ff690d;
		}

		.mobile-title {
			font-size: 24rpx;
			font-weight: 500;
			color: #ff690d;
		}

		.bind-btn {
			width: 100rpx;
			height: 50rpx;
			background: #ff6100;
			border-radius: 25rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
</style>